<template>
  <!--按钮-->
  <div :class="[type,size,'btn-blue']" @click="huClick()">
    <span v-text="value"></span>
  </div>
</template>

<script>
    export default {
        props:{
            value:{
                type: String,
                default: () => "按钮"
            },
            type: {
                type: String,
                default: () => "grey"
            },
            size: {
                type: String,
                default: () => "small" // mini、small、max
            }
        },
        methods: {
            huClick() {
                this.$emit("click")
            }
        }
    }
</script>

<style scoped>
  .btn-blue {
    user-select: none;
    cursor: pointer;
    display: inline-block;
    /* max-width: 70%; */
    padding: 3px 5px;
    text-align: center;
    border-radius: 3px;
    letter-spacing: 1.5px;
    transition: 0.1s;
  }
  .mini{
    height: 12px;
    line-height: 12px;
    font-size: 13px;
  }
  .small{
    height: 13px;
    line-height: 14px;
    font-size: 13px;
  }
  .big{
    height: 16px;
    line-height: 17px;
    font-size: 13px;
  }
  .max{
    height: 18px;
    line-height: 19px;
    font-size: 13px;
  }
  .grey{
    color: rgba(210, 210, 210, 0.5);
    border: 1px solid transparent;
    background-color: #29303c;
  }
  .grey:hover{
    color: rgba(210, 210, 210, 0.8);
    border: 1px solid rgba(210, 210, 210, 0.1);
    /*background-color: #2c3340;*/
  }
  .grey:active{
    background-color: #262d38;
  }

  .blue{
    color: rgba(0, 157, 255,0.5);
    border: 1px solid transparent;
    background-color: #223141;
  }
  .blue:hover{
    color: rgba(0, 157, 255,0.8);
    border: 1px solid rgba(0, 157, 255, 0.1);
    /*background-color: #233243;*/
  }
  .blue:active{
    background-color: #202e3d;
  }

  .green{
    color: rgba(0, 216, 97, 0.5);
    border: 1px solid transparent;
    background-color: #23363a;
  }
  .green:hover{
    color: rgba(0, 216, 97, 0.8);
    border: 1px solid rgba(0, 216, 97, 0.1);
    /*background-color: #23363a;*/
  }
  .green:active{
    background-color: #203135;
  }

  .orange{
    color: rgba(255, 136, 0, 0.5);
    border: 1px solid transparent;
    background-color: #363433;
  }
  .orange:hover{
    color: rgba(255, 136, 0, 0.8);
    border: 1px solid rgba(255, 136, 0, 0.1);
  }
  .orange:active{
    background-color: #2d2d30;
  }

  .red{
    color: rgba(255, 52, 52, 0.5);
    border: 1px solid transparent;
    background-color: #312d38;
  }
  .red:hover{
    color: rgba(255, 52, 52, 0.7);
    border: 1px solid rgba(255, 52, 52, 0.2);
  }
  .red:active{
    background-color: #2d2933;
  }

  .purple{
    color: rgba(128, 0, 102, 0.7);
    border: 1px solid transparent;
    background-color: #302740;
  }
  .purple:hover{
    color: rgb(128, 0, 71);
    border: 1px solid rgba(128, 0, 128, 0.4);
  }
  .purple:active{
    background-color: #2c243b;
  }
</style>
